<{extends file="manage/layout.tpl"}>
<{block name='css'}>
<link rel="stylesheet" href="/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	ul.ztree{background: none; border: none; /*overflow: auto;width:220px;height:360p*/;margin-top: 10px; margin-bottom: 20px;}
	
	.panel-body{min-height: 400px; overflow-y: auto;}
	.panel-body::-webkit-scrollbar {
		width:9px; 
		height:9px; 
		background-color: #F5F5F5; 
	}/*滚动条整体部分*/
    .panel-body::-webkit-scrollbar-track{
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	background-color: #F5F5F5;  
    	border-radius: 8px;
    }/*外层轨道*/
    .panel-body::-webkit-scrollbar-thumb{
    	background:#d9edf7; 
    	border-radius:8px; 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    }/*滚动条里可拖动的部分*/
	.panel-body::-webkit-scrollbar-thumb:hover{
		background:#d9edf7; 
    	border-radius:8px; 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
	}
	.ztree li span.button.ico_docu{
		margin-right: 2px;
	    background: url(/js/ztree/zTreeStyle/img/diy/2.png) no-repeat !important;
	    vertical-align: top;
	}
	.ztree li span.button.ico_open,.ztree li span.button.ico_close{
		margin-right: 2px;
	    background: url(/js/ztree/zTreeStyle/img/diy/1_open.png) no-repeat !important;
	    vertical-align: top;
	}
</style>
<{/block}>
<{block name=title}><{/block}>

<{block name=content}>
<section class="v6-m-mainBox">
	<div class="v6-m-mainContent">
		<div class="row">
			<div class="col-md-8">
				<div class="panel panel-info">
					<div class="panel-heading">
						用户组设置
					</div>
					<div class="panel-body">
						<div class="col-xs-6">
							<input type="text" name="" id="group_name" class="form-control" placeholder="添加用户组名称">
						</div>
						<div class="col-xs-2">
							<button class="btn btn-md btn-primary add-sys-group-botton">添加</button>
						</div>
						<div class="col-md-12">
							<table class="table table-bordered table-impresive pager-table m-margin-top" data-size="10"  id="system_group">
								<thead>
								<tr>
									<th>名称</th>
									<th>状态</th>
									<th>时间</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="pager-foot">
								<div class="col-lg-6">
									<div class="dataTables_info">共<span class="pager-total"></span>条数据</div>
								</div>
								<div class="col-lg-6">
									<ul class="pagination pager-page" style="float: right;">
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-info">
					<div class="panel-heading">
						关联菜单
					</div>
					<div id="menu_id" style="display: none;" class="panel-body">
						<input type="hidden" id="group_id">
						<div class="zTreeDemoBackground">
							<ul id="treeDemo" class="ztree"></ul>
						</div>
						<div class="text-center">
							<button onclick="get_checked_vlave();" class="btn btn-md btn-success">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<template id="item">
	<tr>
		<td>{group_name}</td>
		<td>{status}</td>
		<td>{create_time}</td>
		<td><button onclick="relation_menu({id});" class="btn btn-xs btn-info">关联菜单</button></td>
	</tr>
</template>
<{/block}>

<{block name=js}>
<script type="text/javascript" src="/js/pager/ajaxPage.js"></script>
<script type="text/javascript">
	var gourpTable = '';
	$(function(){
		Pager.init(function(){
			gourpTable = Pager.getObj('system_group');
			gourpTable.url = '/manage/group/get_system_menu_table';
			gourpTable.fun = function(data){
				$.each(data, function(index, data){
					data.status = data.status ? "<span class='label label-success'>正常</span>" : "<span class='label label-danger'>禁用</span>";
					data.create_time = getLocalTime(data.create_time);
				})
				return data;
			}
		})
	})
	
	//去掉空格
	function trim(str){ 
      	return str.replace(/(^\s*)|(\s*$)/g, ""); 
    }
	//添加方法
	$(".add-sys-group-botton").click(function(){
		var name = trim($("#group_name").val());
		if(name==''||name==null){
			layer.msg("用户组名称不能为空");
			return false;
		}else{
			ajaxObj('/manage/group/is_group_name', 'post', {group_name:name}, function(obj){
				if( obj.code == 1000){
					if(obj.data=='0'){
						layer.msg("用户组名称已存在");
						return false;
					}else{
						ajaxObj('/manage/group/addedit_system_group', 'post', {group_name:name,status:1}, function(obj){
							if( obj.code == 1000){
								layer.msg("添加成功");
								gourpTable.reload(true);
							}
						},errorFn)
					}
				}
			},errorFn)
		}
	})
	
	
	function searchUser(){
		$.each($('.searchInput'), function(index, obj){
			gourpTable.addParam($(obj).attr("name"), $(obj).val());
		})
		gourpTable.reload(true);
	}
	
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		function relation_menu(id){
			$('#menu_id').hide();
			ajaxObj('/manage/group/get_group_menu', 'post', {group_id:id}, function(obj){
				if( obj.code == 1000){
					var objmenu=obj.data;
					$.fn.zTree.init($("#treeDemo"), setting, objmenu);
					$("#group_id").val(id);
					$('#menu_id').show();
				}
			},errorFn)
		}
		
	function get_checked_vlave(){
		var group_id=$("#group_id").val();
		if(group_id!=null&&group_id!=''){
			var strid = [];
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getCheckedNodes(true);
			for (var i = 0; i < nodes.length; i++) {
				strid.push(nodes[i].id);
			}
			if(strid.length!=0){
				ajaxObj('/manage/group/addedit_system_group_menu', 'post', {group_id:group_id,menus:strid}, function(obj){
					if( obj.code == 1000){
						layer.msg("添加成功");
					}
				},errorFn)
			}else{
				layer.msg("请选择菜单");
			}
		}else{
			layer.msg("参数错误");
		}
	}
</script>
<script type="text/javascript" src="/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/zTree/js/jquery.ztree.exedit.js"></script>
<{/block}>
